<html>

<head>
    <meta charset="utf-8"/>
    <meta content="width=device-width, initial-scale=1" name="viewport"/>
    <title>ECharts Demo</title>
    <script crossorigin="anonymous"
            integrity="sha512-ivdGNkeO+FTZH5ZoVC4gS4ovGSiWc+6v60/hvHkccaMN2BXchfKdvEZtviy5L4xSpF8NPsfS0EVNSGf+EsUdxA=="
            referrerpolicy="no-referrer" src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.2.2/echarts.min.js"></script>
    <style>
        body {
            margin: 0;
            display: flex;
            flex-direction: row;
            justify-content: center;
        }

        #title-container {
            width: 600 pxpx;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
        }

        #download-btn {
            border-radius: 6px;
            background-color: aliceblue;
            border: 1px solid black;
        }

        #display-container {
            width: 600px;
            height: 600px;
            border: 2px solid black;
        }
    </style>
</head>

<body>
<div id="container">
    <div id="title-container">
        <h1 class="display">ECharts Java</h1>
        <button id="download-btn" onclick="downloadImage()">Download Image</button>
    </div>
    <div id="display-container">
    </div>
</div>

<script type="text/javascript">
    function downloadImage() {
        let canvas = document.querySelector("canvas");
        let image = canvas.toDataURL("image/png").replace("image/png",
            "image/octet-stream");
        let fakeLink = document.createElement("a");
        if (typeof fakeLink.download === "string") {
            document.body.appendChild(fakeLink);
            fakeLink.download = "echart.png";
            fakeLink.href = image;
            fakeLink.click();
            document.body.removeChild(fakeLink);
        } else {
            location.replace(image);
        }
    }

    let chart = echarts.init(document.getElementById("display-container"));
    let option = {
        "title": {"text": "巴西利亚每年的温度系统"},
        "xAxis": [{
            "type": "category",
            "name": "年份",
            "data": ["1961", "1962", "1963", "1964", "1965", "1966", "1967", "1968", "1969", "1970", "1971", "1972", "1973", "1974", "1975", "1976", "1977", "1978", "1979", "1980", "1981", "1982", "1983", "1984", "1985", "1986", "1987", "1988", "1989", "1990", "1991", "1992", "1993", "1994", "1995", "1996", "1997", "1998", "1999", "2000", "2001", "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017", "2018", "2019"]
        }],
        "yAxis": [{"type": "value"}],
        "legend": {},
        "series": [{
            "type": "line",
            "name": "最高温度",
            "data": [33.4, 33.0, 34.5, 30.7, 33.0, 32.0, 32.5, 33.3, 33.2, 31.6, 31.2, 32.8, 32.5, 32.0, 32.8, 31.4, 32.0, 32.5, 32.4, 33.4, 33.0, 31.6, 31.2, 31.8, 31.3, 32.2, 32.6, 33.2, 31.6, 31.6, 30.8, 30.0, 31.4, 33.7, 32.9, 32.7, 33.1, 33.5, 32.3, 32.5, 32.6, 33.1, 33.3, 33.6, 33.8, 32.7, 34.3, 35.8, 31.8, 33.2, 33.4, 33.7, 33.0, 35.0, 36.4, 34.9, 35.6, 33.6, 34.9]
        }, {
            "type": "line",
            "name": "最低温度",
            "data": [10.8, 5.3, 9.0, 6.0, 9.2, 9.0, 9.5, 7.8, 7.1, 10.1, 9.4, 10.3, 7.4, 8.6, 1.6, 9.8, 3.2, 5.0, 7.2, 11.4, 6.6, 10.8, 8.6, 9.1, 3.3, 10.1, 8.7, 8.3, 9.4, 7.0, 9.5, 11.1, 8.9, 6.6, 9.9, 6.9, 8.0, 10.1, 9.0, 8.2, 11.1, 11.2, 10.3, 9.4, 10.2, 10.8, 10.9, 10.6, 9.8, 9.4, 11.1, 11.8, 8.9, 11.3, 11.4, 9.9, 10.0, 9.3, 8.6]
        }, {
            "type": "line",
            "name": "平均温度",
            "data": [22.685970149253734, 19.31308943089431, 21.197534246575344, 20.00060109289618, 20.359452054794506, 20.2318904109589, 20.530794520547936, 19.705573770491803, 20.85223463687151, 20.53112328767125, 20.333698630136983, 20.865409836065584, 21.21742465753424, 20.526483516483523, 20.439616438356172, 20.401803278688533, 20.9252602739726, 20.27797260273971, 20.51975903614458, 20.62754098360654, 20.299879154078525, 20.462630136986295, 20.659871382636656, 20.855846994535508, 20.342197802197802, 20.83137362637364, 21.28246575342467, 20.75817679558012, 20.561257142857134, 20.849753424657536, 20.397315068493157, 20.170382513661206, 20.979779005524875, 21.121479452054814, 21.19060439560438, 21.114808743169394, 20.9269060773481, 21.928657534246575, 21.236054794520555, 21.053989071038256, 21.080826446280987, 21.726739726027382, 21.324493150684944, 21.07502762430939, 21.474301369862996, 21.156000000000013, 21.774888888888878, 21.33486338797815, 21.33489010989009, 21.64408839779007, 21.169502762430938, 21.407087912087924, 21.4528219178082, 21.505054945054937, 22.250274725274743, 22.455320334261856, 21.785911602209918, 21.480994475138118, 22.186077348066288]
        }]
    }
    chart.setOption(option);
</script>
</body>

</html>